/* 
  创建应用,部署方式选择页面
 */

<template>
  <div class="app-container">
    <el-row class="wrapper found">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>创建应用
          </p>
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">

            <el-tab-pane  name="first" v-if="this.userBaseInfo.getIsSuperAdmin() == 1 ? true : false">
              <span slot="label" >
                <span class="icons01"></span>编排文件
              </span>
              <el-steps direction="vertical" :active="1" >
                <el-step title="部署方式" icon="el-icon-load"></el-step>
                <el-step title="编排文件" icon="el-icon-load01"></el-step>
              </el-steps>
            </el-tab-pane>
            <!-- <el-tab-pane name="second">
              <span slot="label">
              <span class="icons02"></span>应用商店</span>
              <el-steps direction="vertical" :active="1"  simple>
                <el-step title="部署方式" icon="load"></el-step>
                <el-step title="选择应用" icon="load01"></el-step>
                <el-step title="创建应用" icon="load01"></el-step>
              </el-steps>
            </el-tab-pane> -->
            <el-tab-pane name="second">
              <span slot="label">
               <span class="icons03"></span>镜像仓库</span>
              <el-steps direction="vertical" :active="1">
                <el-step title="部署方式" icon="el-icon-load"></el-step>
                <el-step title="选择镜像" icon="el-icon-load01"></el-step>
                <el-step title="创建应用" icon="el-icon-load01"></el-step>
              </el-steps>

            </el-tab-pane>
          </el-tabs>
          <div class="step">
            <el-button class="iconfont icon-fanhui" @click="back">取消</el-button>
            <el-button class="iconfont icon-liebiaozhankai" type="primary"  @click="next">下一步</el-button>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>
<script>
import { appManagement } from '@/utils/appManagement'
  export default {
    data() {
      return {
        activeName2: 'second',
        active: '1',
      };
    },
    created() {
      // 默认选择编排文件部署方式
      appManagement.setAppDeploySelected('second');
    },
    methods: {
      handleClick(tab, event) {
        // 得到当前选择面板的名字
        let deploySelected = tab.name;
        // 缓存到浏览器,跨页面使用
        appManagement.setAppDeploySelected(deploySelected);
        //console.log(tab.name);
      },
      next() {
		  // 修改左边的步骤
        if (this.active++ > 2) this.active = 1;
      },
      back() {
		  // 修改左边的步骤
        if (this.active-- > 2) this.active = 1;
      },
      back() {
		// 返回应用管理首页,展示
		this.$router.push({
            path: '/apply/management/app_page'
        });
        
      },
      next() {
        // 从浏览器缓存中得到当前选择的部署方式
        let deploySeleected = appManagement.getAppDeploySelected();
        // 路由跳转
        if (deploySeleected == 'first') {
          // 选择编排文件部署方式
          this.$router.push({
            path: '/apply/management/app_create/compose_file'
          });
        } else if ( deploySeleected == 'second') {
          // 选择了镜像仓库部署方式
          this.$router.push({
            path: '/apply/management/app_create/image_repertory'
          });
        } else if ( deploySeleected == 'third'){
          // 选择了镜像仓库部署方式
        } else {
          	// 没有选择
          	this.$notify.info({
				//title: '消息',
				message: '请选择其中一种部署方式'
			});
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss";

.found .el-tabs--card{
    height:277px;
    margin-top:40px;
}
.found .el-tabs__header{
    float:right;
    width:76%;
    padding-right:4px;
    padding-left:10px;
    border-bottom:none;
    padding-bottom:20px;
    border-left:1px solid #eaeaea;
}
.found .el-tabs__content{
    float: left;
    width: 20%;
    text-algin: center;
    margin-left:4%;
}
.found .el-step__head  {
    margin-bottom:60px;
}
.found .el-step.is-horizontal, .found .el-step.is-vertical .el-step__head, .found .el-step.is-vertical .el-step__main, .found .el-step__line{
    display:contents;
}
.found .el-tabs__content .line{
   width:1px;
   height:80px;
   border:1px dashed #ccc;
   display: block;
   text-align:center;
}
.found .el-tabs--card .el-tabs__item{
   width:220px;
   height:220px;
   margin-left:20px;
   border-radius:4px;
   line-height: 370px;
   border:2px solid #eaeaea;
   text-align: center;
   font-size: 18px;
}
.found .el-tabs--card .el-tabs__item .icons01{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage06.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}
.found .el-tabs--card .el-tabs__item.is-active .icons01{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage05.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}

.found .el-tabs--card .el-tabs__item .icons02{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage03.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}
.found .el-tabs--card>.el-tabs__header .el-tabs__nav{
  border:none;
}
.found .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
  border-left: 2px solid #eaeaea;
}
.found .el-tabs--card .el-tabs__item.is-active .icons02{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage04.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}

.found .el-tabs--card .el-tabs__item.is-active .icons03{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage01.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}

.el-step__title.is-process{
   color:#b4bccc;
   font-weight: normal;
}
.found .el-tabs--card .el-tabs__item .icons03{
    width:220px;
    height:220px;
    background:url(../../../assets/images/manage02.png) no-repeat 50% 10%;
    position: absolute;
    left: 0;
    right: 0;
}
.found .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    background:url(../../../assets/images/found.png) no-repeat left center;
    background-size:220px 220px;
    border:0;
}

.found .el-step__icon{
    font-size:22px;
}
.found .el-step__icon  .el-icon-load{
  width:30px;
  height:30px;
  background:url(../../../assets/images/Cloud-down.png);
  background-size:30px 30px;
}
.found .el-step__icon  .el-icon-load01{
  width:30px;
  height:30px;
  background:url(../../../assets/images/Cloud-down-no.png);
  background-size:30px 30px;
}
.found .step{
  width:100%;
  text-align:right;
  border-top:1px solid #eaeaea;
  padding-top:10px;

}
.el-step.is-vertical .el-step__icon.is-icon{
  width:30px;
}
.found .el-tabs__item{
   padding:0 40px;
}
.found .el-step__title{
    font-size:16px;
}
.found .el-step.is-vertical .el-step__line{
    width:1px;
    top:0;
    bottom: -60px;
    left: 16px;
}
</style>